<template>
    <div class="department-container">
    <el-tree :data="data" :props="defaultProps">
      <div class="item">
        <div class="left">传值僬侥</div>
        <div class="right">
          <span>管理员</span><span>操作</span>
        </div>
      </div>
    </el-tree>
    <div @click="doClick">qqq</div>
    </div>
</template>

<script>
export default {
  name: 'test-tree',
  data () {
    return {
      arr: [],
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    doClick () {
      const arr = []
      function tree (data) {
        for (const k of data) {
          console.log(k.children)
          if (!k.children) {
            if (k.id) {
              arr.push(k.id)
            }
            tree(k.children)
          }
        }
      }

      tree(this.data)
      console.log(arr)
      this.arr = arr
    }
  }
}
</script>

<style lang="less" scoped>
  .department-container {
    padding: 20px;
    .item {
      width: 100%;
      display: flex;
      .left {
        flex: 4;
        background-color: red;
        padding: 10px 0;
      }
      .right {
        flex: 1;
        background-color: greenyellow;
      }
    }
  }
</style>
